<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-08-19 16:10:37
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-08-19 16:21:14
 * @FilePath     : \rpms\src\views\funds\statistics\index.vue
-->
<template>
  <el-card>
    <el-row>
      <el-col :span="2">
        <el-select
          v-model="model.activeYear"
          placeholder="请选择"
          style="width: 100%"
          @change="changeDate"
        >
          <el-option
            v-for="(item, index) in years"
            :key="index"
            :label="item"
            :value="item"
            >{{ item }}</el-option
          >
        </el-select>
      </el-col>
      <el-col :span="22">
        <el-button
          style="margin-left: 10px"
          type="primary"
          v-auth="`/funds/statistics-year`"
          @click="handleYear"
          >年度预算填报</el-button
        >
        <el-button
          type="primary"
          v-auth="`/funds/statistics-month`"
          @click="handleMonth"
          >月度支出填报</el-button
        >
        <el-button
          v-auth="`/funds/statistics-export`"
          type="primary"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="changeTab">
      <el-tab-pane
        ref="summary"
        label="年度预算汇总表"
        name="YEAR"
        v-if="isShow('/funds/statistics-year-tab', 'YEAR')"
      >
        <FundYear ref="yearRef" />
      </el-tab-pane>
      <el-tab-pane
        ref="summary"
        label="月度支出汇总表"
        name="MOUNTH"
        v-if="isShow('/funds/statistics-month-tab', 'MOUNTH')"
      >
        <FundsSummary ref="mounthRef" />
      </el-tab-pane>
      <el-tab-pane
        ref="table"
        label="经费明细填报"
        name="TABLE"
        v-if="isShow('/funds/statistics-tab', 'TABLE')"
      >
        <FundsTable ref="fundsTableRef" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import FundsSummary from "./components/FundsSummary.vue";
import FundYear from "./components/FundYear.vue";
import FundsTable from "./components/FundsTable.vue";
import { useRouter } from "vue-router";
import { getFeeYears } from "/@/api/funds";
import { postDownload } from "/@/utils/download";
import { usePermissionStoreHook } from "/@/store/modules/permission";
const router = useRouter();
let activeName = ref<any>("YEAR");
const model = reactive({
  activeYear: new Date().getFullYear() + ""
});
const table = ref(null);
const mounthRef = ref(null);
const fundsTableRef = ref(null);
const yearRef = ref(null);
const summary = ref(null);
const years = ref([]);
const showTypes = ref([]);

onMounted(() => {
  getYearList();

  setTimeout(() => {
    // if (table.value && !summary.value) {
    //   activeName.value = "YEAR";
    // }
    activeName.value = showTypes.value[0];
  }, 300);
});

const changeTab = () => {
  if (activeName.value === "YEAR") {
    if (yearRef.value) {
      yearRef.value.initGetData(model.activeYear);
    }
  } else if (activeName.value === "MOUNTH") {
    if (mounthRef.value) {
      mounthRef.value.initGetData(model.activeYear);
    }
  } else {
    if (fundsTableRef.value) {
      fundsTableRef.value.getTableData({
        inputNum: "",
        createUserName: "",
        pageSize: 10,
        pageNum: 1,
        createStartTime: "",
        createEndTime: "",
        approveStatus: "", // 状态 1，2，3，4
        inputType: "" // 状态 1，2
      });
    }
  }
};

const isShow = (authRoles, type) => {
  const authList = usePermissionStoreHook().buttonAuth;
  const hasAuth = (authList && authList.includes(authRoles)) ?? false;
  if (!hasAuth) {
    showTypes.value.push(type);
  }
  return !hasAuth;
};

const getYearList = async () => {
  const { code, data } = await getFeeYears();
  if (code === 200) {
    years.value = data;
  }
};

const handleYear = () => {
  router.push({
    path: "/funds/statistics/year",
    query: { mode: "add" }
  });
};

const handleMonth = () => {
  router.push({
    path: "/funds/statistics/month",
    query: { mode: "add" }
  });
};
const changeDate = item => {
  model.activeYear = item;
  if (mounthRef.value) {
    mounthRef.value.initGetData(model.activeYear);
  }
  if (yearRef.value) {
    yearRef.value.initGetData(model.activeYear);
  }
};
const handleExport = async () => {
  if (activeName.value === "YEAR") {
    //年度预算
    const downUrl = `/rdms-admin/fee/budget/annual/summary/export/${model.activeYear}`;
    const fileName = "年度预算汇总表.xlsx";
    await postDownload(downUrl, fileName);
  } else if (activeName.value === "MOUNTH") {
    //月度支出
    const downUrl = `/rdms-admin/fee/summary/statistics/export/${model.activeYear}`;
    const fileName = "月度支出汇总表.xlsx";
    await postDownload(downUrl, fileName);
  } else if (activeName.value === "TABLE") {
    //经费明细
    const downUrl = `/rdms-admin/fee/export/list`;
    const fileName = "经费明细填报.xlsx";
    const downData = Object.assign({}, fundsTableRef.value.formInline);
    downData.pageSize = 0;
    await postDownload(downUrl, fileName, downData);
  }
};
</script>
